<template>
   
    <div style="width: 100%;height: 100%;" v-cloak >
        <div class="box">
            <!-- <img class="box_bg" :src="'https://project.hangzhou.com.cn/project2024/dragon/static/images/box'+`${num}`+'.png'" alt="">-->
            <img class="box_bg" :src="'./../../static/images/box'+`${num}`+'.png'" alt=""> 
            <div class="demo_box">
                <img class="demo" :src="str" alt="">
            </div>
            <div class="btn_div">
                <img @click="poster" class="poster_btn" src="./../../static/images/poster_btn.png" alt="">
                <van-uploader :after-read="replay" />
            </div>
            
       </div>
        <div :style="{'height':height+'px','width':width+'px'}" v-show="false">
                <vue-canvas-poster
                        :widthPixels="width"
                        :height="height+'px'"
                        :painting="painting"
                        @success="success"
                        @fail="fail"  
                        :style="{'height':height+'px','width':width+'px'}" 
                    >
                </vue-canvas-poster>   
          </div>
        <div class="mypop" v-show="show">
            <img class="post_img" :src="posterImg" />
            <p class="pop_p">-长按保存海报-</p>
        </div>

    </div>
</template>

<script>
import Vue from 'vue';
import { Popup } from 'vant';
import { Uploader } from 'vant';
import { VueCanvasPoster } from 'vue-canvas-poster'
import { Loading } from 'vant';
import { Toast } from 'vant';
import { Overlay } from 'vant';

Vue.use(Overlay);

Vue.use(Toast);

Vue.use(Loading);
Vue.use(Uploader);
Vue.use(Popup);
import html2canvas from "html2canvas";
export default {
  name: 'rule',
  data () {
    return {
        num:'',
       str:'',
       show:false,
       height:'',
       width:'',
       posterImg: "", //生成的海报
       painting: {
            width: '',
            height: '',
            // background: require("./../../static/images/box1.png"), // 背景图片，
            views: [
                // 头像位置
              {
                type: "image", 
                url: '',
                css: {
                  top: `${document.documentElement.clientHeight*12/100}px`,
                  left: `${(document.documentElement.clientWidth)*3/100}px`,
                  borderRadius: "0px",
                  width: `${(document.documentElement.clientWidth)*94/100}px`,
                  height:`${(document.documentElement.clientHeight*54)/100}px`, 
                },
              },
              {
                type: "image", 
                url: '',
                css: {
                  top: "0px",
                  left: "0px",
                  borderRadius: "0px",
                  width: `${document.documentElement.clientWidth}px`,
                  height: `${document.documentElement.clientHeight}px`,   
                },
              },
             
            ],
          },
      
    }
  },
  created(){
    this.str = this.$route.query.src
    this.num = this.$route.query.num
    this.height = document.body.clientHeight 
    this.width = document.body.clientWidth 
    this.$set(this.painting,'width',this.width+'px')
    this.$set(this.painting,'height',this.height+'px')
    // var src = 'https://project.hangzhou.com.cn/project2024/dragon/static/images/box'+this.num +'.png'
     var src = './../../static/images/box'+this.num +'.png'
    this.$set(this.painting.views[1],'url',src)
    this.$set(this.painting.views[0],'url',this.str)
    this.success()
  },
  methods:{
    // 生成成功
    success(src) {
        this.posterImg = src;    
    },
    //生成失败
    fail() {
      Toast.fail('生成失败');
      setTimeout(()=>{
        window.location.href = 'https://rmt.imugeda.com/c/zxwz/vbm_/index.html'
      },2000)
    },
    // 再玩一次
      replay(file) {
            if(file.content){
              this.num =1 + Math.floor(Math.random() * 3)
                this.str = file.content
            }
      },
      // 生成海报
      poster(){
          this.$set(this.painting.views[0],'url',this.str)
          this.show = true   
      },




  }
}
</script>
<style scoped>
[v-cloak] {diaplay : none;}
body{-webkit-touch-callout: none;}
.box_bg{
    width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  
}
.box{
    width: 100%;
  height: 100%;
  position: relative;
}
.demo{
  width:100%;
  height: 100%;
  object-fit: cover;
  z-index: 90;
}
.demo_box{
  position: absolute;
  top: 14%;
  left: 5%;
  width: 90%;
  height: 55%;
}
.btn_div{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: 22%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    z-index: 102;
}
.poster_btn{
  width: 163px;
  height: 45px;
}

.btn_div>>>.van-uploader__upload-icon{
  opacity: 0 !important;
}
.btn_div>>>.van-uploader__upload{
  width: 163px !important;
  height: 45px !important;
  background: url('./../../static/images/btn_replay.png') no-repeat !important;
  background-size: 100% 100% !important;
}
.btn_div>>>.van-uploader {
  width: 163px !important;
  height: 45px !important;
  box-sizing: border-box;
}
.mypop>>>.canvas{
    top:0 !important
}
.post_img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypop{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
.pop_p{
  width: 100%;
  height: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 100px;
  font-size: 16px;
  color: #813825;
  font-weight:bolder;
}
</style>